<template>
	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="checkAll" />
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<li :class="{ completed: item.done }" v-for="item in list" :key="item.id">
				<div class="view">
					<input class="toggle" type="checkbox" :checked="item.done" @change="changeFn(item.id)" />
					<label>{{ item.name }}</label>
					<button class="destroy" @click="del(item.id)"></button>
				</div>
			</li>
		</ul>
	</section>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				currentId: '',
				currentName: '',
			}
		},
		computed: {
			...mapGetters({
				list: 'showList',
			}),
			checkAll: {
				get() {
					return this.list.every((item) => item.done)
				},
				set(value) {
					// 修改done属性
					this.$store.commit('checkAll', value)
				},
			},
		},
		methods: {
			changeFn(id) {
				this.$store.commit('changeDone', id)
			},
			del(id) {
				this.$store.commit('del', id)
			},
		},
	}
</script>

<style></style>
